<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="my.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white">器械说明</span></li></a>
                    <a href="shopping.html"><li><span style="color: white">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
       <div class="container">
        <!-- 用户概览 -->
        <div class="profile-card">
            <!-- <img src="avatar.jpg" alt="用户头像" class="avatar"> -->
            <div class="avatar-uploader">
                <img src="" class="avatar" alt="头像">
                <label class="upload-mask">
                    <input type="file" class="upload-input" 
                           accept="image/png, image/jpeg">
                    <i class="fas fa-camera"></i>
                </label>
            </div>
            <div class="profile-info">
                <h1>张小明</h1>
             
                
                <div class="profile-meta">
                    <span>注册于2020年8月</span>
                    <span>·</span>
                    <span>最后登录：2小时前</span>
                </div>
            </div>
        </div>
        <!-- 导航菜单 -->
        <nav class="settings-nav">
            <ul class="nav-list">
                <li><a href="#profile" class="nav-link active"><i class="fas fa-user"></i> 基本资料</a></li>
                <li><a href="#security" class="nav-link"><i class="fas fa-shield-alt"></i> 账号安全</a></li>
                <li><a href="#privacy" class="nav-link"><i class="fas fa-lock"></i> 隐私设置</a></li>
            </ul>
        </nav>
        <!-- 基本资料模块 -->
        <section class="settings-section" id="profile">
            <div class="section-header">
                <h2><i class="fas fa-user-edit"></i> 基本资料</h2>
            </div>
            
            <div class="form-group">
                <label class="form-label">姓名</label>
                <input type="text" class="form-control" value="张小明">
            </div>
            <div class="form-group">
                <label class="form-label">性别</label>
                <select class="form-control">
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">出生日期</label>
                <input type="date" class="form-control" value="1990-01-15">
            </div>
            <div class="form-group">
                <label class="form-label">电子邮箱</label>
                <input type="email" class="form-control" 
                       placeholder="name@example.com"
                       pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
            </div>
            <div class="form-group">
                <label class="form-label">手机号码</label>
                <input type="tel" class="form-control"
                       placeholder="13800138000"
                       pattern="^1[3-9]\d{9}$"
                       maxlength="11">
            </div>
            <div class="form-group">
                <label class="form-label">居住地址</label>
                <div class="address-combobox">
                    <input type="text" class="form-control" 
                           placeholder="省/市/区">
                    <input type="text" class="form-control mt-2"
                           placeholder="详细地址">
                </div>
            </div>
            
            <button class="btn btn-primary">保存修改</button>
        </section>
        <!-- 账号安全模块 -->
        <section class="settings-section" id="security">
            <div class="section-header">
                <h2><i class="fas fa-shield-halved"></i> 安全设置</h2>
            </div>
            <div class="security-item">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="font-medium">登录密码</h3>
                        <p class="text-sm text-gray-600">上次修改：2023年9月1日</p>
                    </div>
                    <button class="btn btn-secondary">修改密码</button>
                </div>
            </div>
            <div class="security-item">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="font-medium">手机验证</h3>
                        <p class="text-sm text-gray-600">已绑定手机：138****8000</p>
                    </div>
                    <span class="verification-badge">
                        <i class="fas fa-check-circle"></i>
                        已验证
                    </span>
                </div>
            </div>
        </section>
        <!-- 隐私设置模块 -->
        <section class="settings-section" id="privacy">
            <div class="section-header">
                <h2><i class="fas fa-user-secret"></i> 隐私偏好</h2>
            </div>
            <div class="privacy-option">
                <label class="flex items-center gap-2 mb-4">
                    <input type="checkbox" class="form-checkbox" checked>
                    <span>允许通过手机号找到我</span>
                </label>
            </div>
            <div class="privacy-option">
                <label class="flex items-center gap-2 mb-4">
                    <input type="checkbox" class="form-checkbox">
                    <span>展示在线状态</span>
                </label>
            </div>
        </section>
<script src="my.js"></script>
    
   
</body>
</html>